<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="goBack"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.cvtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language"
					@click="openMask"></image>
			</view>
		</view>
		<view class="total">
			<view class="line1">
				<view class="test">
					<!-- {{$data.$language.dtest}} -->
					{{$data.$language.DynamicReturns}}
				</view>
				<image src="../../static/qianbaobeifen2_slices/yincang (1)beifen 3.png" mode=""></image>
				<view class="boxinshs">
					<!-- {{$data.$language.levelCar}}：{{levemonxS || 'w0'}} -->
					{{$data.$language.levelMy}}：{{levemonxS || 'v0'}}
				</view>
			</view>
			<view class="line2">
				<view class="number">
					{{count_usdt}}
				</view>
				<view class="word">
					USDT
				</view>
			</view>
			<view class="line3">
				<view class="code">
					<!-- {{UrlData.url}} -->
					{{loacUrl}}
				</view>
				<!-- <view class="code" v-else>
					无更多数据
				</view> -->
				<!-- <image src="../../static/qianbaobeifen2_slices/fuzhi.png" mode=""></image> -->
			</view>
			<view class="shareCss-view">
				<view class="shareCss" @click="setClipboardDataBtn">{{$data.$language.shareurl}}</view>
			</view>
		</view>
		<view class="team">
			<view class="teamTitle">
				<view class="">
					{{$data.$language.teamTitleDatanone}} ： {{teamTitleData || "0.00"}}
				</view>
				<view class="">
					{{$data.$language.teamTitle2}} ： {{teamperformance || "0.00"}}
				</view>
			</view>
			<view class="teamTitle" style="margin-top: 24rpx;">
				<view class="">
					{{$data.$language.teamTitle}}
				</view>
			</view>
			<view class="teamList teamList1" v-for="(item,index) in fans" :key="index">
				<image src="../../static/shequ/Vip1beifen.png" mode=""></image>
				<view class="word1">
					{{item.url}}
				</view>
				<view class="right">
					<view class="word2">
						{{$data.$language.cword2}}
					</view>
					<view class="word3">
						<view class="number">
							{{item.pay_usdt}}
						</view>
						<view class="letter">
							USDT
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="teamList teamList1">
				<image src="../../static/shequ/Vip1beifen.png" mode=""></image>
				<view class="word1">
					{{fans.data[0].url}}
				</view>
				<view class="right">
					<view class="word2">
						{{$data.$language.cword2}}
					</view>
					<view class="word3">
						<view class="number">
							{{fans.data[0].pay_usdt}}
						</view>
						<view class="letter">
							USDT
						</view>
					</view>
				</view>
			</view>
			<view class="teamList teamList1">
				<image src="../../static/shequ/Vip1beifen.png" mode=""></image>
				<view class="word1">
					{{fans.data[0].url}}
				</view>
				<view class="right">
					<view class="word2">
						{{$data.$language.cword2}}
					</view>
					<view class="word3">
						<view class="number">
							{{fans.data[0].pay_usdt}}
						</view>
						<view class="letter">
							USDT
						</view>
					</view>
				</view>
			</view>
			<view class="teamList teamList1">
				<image src="../../static/shequ/Vip1beifen.png" mode=""></image>
				<view class="word1">
					{{fans.data[0].url}}
				</view>
				<view class="right">
					<view class="word2">
						{{$data.$language.cword2}}
					</view>
					<view class="word3">
						<view class="number">
							{{fans.data[0].pay_usdt}}
						</view>
						<view class="letter">
							USDT
						</view>
					</view>
				</view>
			</view>
			<view class="teamList teamList1">
				<image src="../../static/shequ/Vip1beifen.png" mode=""></image>
				<view class="word1">
					{{fans.data[0].url}}
				</view>
				<view class="right">
					<view class="word2">
						{{$data.$language.cword2}}
					</view>
					<view class="word3">
						<view class="number">
							{{fans.data[0].pay_usdt}}
						</view>
						<view class="letter">
							USDT
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import {
		getMyteam
	} from '@/api/index.js';
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	export default {
		data() {
			return {
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				count_usdt: '',
				fans: [],
				UrlData: {},
				levemonxS: null,
				teamTitleData: 0,
				teamperformance: null,
				loacUrl: ""
			}
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if (translate == 'en-US') {
				this.$data.$language = enUS
			} else if (translate == 'zh-CN') {
				this.$data.$language = zhCN
			} else {
				this.$data.$language = trCN
			}
			this.loadData()
		},
		methods: {
			setClipboardDataBtn() {
				var codepboard = this.$data.$language.codepboard
				uni.setClipboardData({
					data: this.loacUrl,
					success: function() {
						console.log('success');
						uni.showToast({
							icon: 'none',
							title: codepboard,
						});
					}
				});
			},
			refreshLanguage(locale) {
				if (locale === 'zh-CN') {
					this.$language = zhCN
				} else if (locale === 'en-US') {
					this.$language = enUS
				} else {
					this.$language = trCN
				}
				uni.reLaunch({
					url: '/pages/community/community' // 当前页面的lujing
				});

			},
			goBack() {
				this.$emit('close')
				uni.navigateBack()
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
				getMyteam({
						page: ''
					},
					(data) => {
						// 处理成功返回的数据
						this.UrlData = data
						this.count_usdt = data.count_usdt
						this.fans = data.fans
						this.levemonxS = data.level
						this.teamTitleData = data.myperformance
						this.teamperformance = data.teamperformance
						// this.loacUrl = window.location.origin + '/#/?addr=' + this.UrlData.url
						this.loacUrl = window.location.origin
						// console.log(this.fans.data[0].url,'url');
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style>
	.box {
		background: linear-gradient(18deg, #fff, #fff, #fff, #fff, #ADBEDE, #8BA3CD);
	}

	.head {
		padding: 40rpx;
	}

	.headTitle {
		display: flex;
	}

	.team {
		margin-top: 68rpx;
	}


	.title {
		width: 262rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 110rpx;
		text-align: center;
		margin-top: 28.85rpx;
	}

	.total {
		width: 702rpx;
		height: 424rpx;
		background: linear-gradient(90deg, #034ED4 0%, #4286F4 100%);
		border-radius: 16rpx;
		margin: 0 0 0 24rpx;
		overflow: hidden;
	}

	.total .line1 {
		display: flex;
		margin: 26rpx 0 0 36rpx;
		position: relative;
	}

	.boxinshs {
		position: absolute;
		top: 0;
		right: 24rpx;
		color: #d8e5fb;
		font-size: 34rpx;
	}

	.line1 .test {
		height: 40rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #d6e1f3;
		line-height: 40rpx;
	}

	.line1 image {
		width: 16rpx;
		height: 12rpx;
		margin-top: 10rpx;
		margin-left: 4rpx;
	}

	.line2 {
		display: flex;
		margin-top: 20rpx;
	}

	.line2 .number {
		/* width: 212rpx; */
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 16rpx 0 0 32rpx;
	}

	.line2 .word {
		/* width: 98rpx; */
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin: 34rpx 0 0 10rpx;
	}

	.line3 {
		display: flex;
		margin-top: 20rpx;
	}

	.line3 .code {
		/* height: 22rpx; */
		width: 600rpx;
		overflow: hidden;
		white-space: pre-wrap;
		font-family: ArialMT;
		color: #FFFFFF;
		/* line-height: 22rpx; */
		margin: 10rpx 0 0 36rpx;
		font-size: 38rpx;
		word-wrap: break-word;
	}

	.line3 image {
		width: 16rpx;
		height: 18rpx;
		margin: 32rpx 0 0 4rpx;
	}

	.teamTitle {
		/* width: 282rpx; */
		height: 46rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-left: 24rpx;
		display: flex;
	}

	.teamTitle view {
		margin-right: 40rpx;
	}

	.teamList {
		width: 702rpx;
		height: 140rpx;
		background: #F4F6FA;
		border-radius: 16rpx;
		margin: 20rpx 0 0 24rpx;
		display: flex;
	}

	.teamList1 {
		margin-top: 16rpx;
	}

	.teamList image {
		width: 28rpx;
		height: 26rpx;
		margin: 58rpx 0 0 32rpx;
	}

	.teamList .word1 {
		width: 212rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: ArialMT;
		color: #2C2C2C;
		line-height: 34rpx;
		margin: 54rpx 0 0 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.teamList .right .word2 {
		width: 156rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #939393;
		line-height: 34rpx;
		text-align: right;
		margin: 30rpx 0 0 234rpx;
	}

	.teamList .right .word3 {
		display: flex;
		margin: 8rpx 0 0 174rpx;
		width: 216rpx;
		height: 34rpx;
		text-align: right;
		justify-content: flex-end;
	}

	.teamList .right .word3 .number {

		font-size: 32rpx;
		font-family: Arial Bold;
		font-weight: BoldMT;
		line-height: 36rpx;
		color: #2C2C2C;
		text-align: right;
		margin-left: 32rpx;
	}

	.teamList .right .word3 .letter {
		font-size: 24rpx;
		font-family: Arial;
		font-weight: BoldMT;
		line-height: 36rpx;
		color: #2C2C2C;
		text-align: right;
		margin: 4rpx 0 0 4rpx;
	}
	.shareCss-view {
		display: flex;
		justify-content: center;
	}
	.shareCss {
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		line-height: 66rpx;
		color: #0762FF;
		font-size: 28rpx;
		padding: 0 26rpx;
		z-index: 9;
		display: inline-block;
		/* position: absolute;
		left: 50%;
		transform: translateX(-50%); */
		margin-top: 20rpx;
	}
</style>